<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<meta name="description" content="Creative CV is a HTML resume template for professionals. Built with Bootstrap 4, Now UI Kit and FontAwesome, this modern and responsive design template is perfect to showcase your portfolio, skils and experience." />
		<link href="css/aos.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="styles/main.css" rel="stylesheet">
	</head>
	<body id="top">
		<header>
			<div class="profile-page sidebar-collapse">
				<nav class="navbar navbar-expand-lg fixed-top navbar-transparent bg-primary" color-on-scroll="400">
					<div class="container">
						
							<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
							 aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-bar bar1"></span><span
								 class="navbar-toggler-bar bar2"></span><span class="navbar-toggler-bar bar3"></span></button>
						</div>
						<div class="collapse navbar-collapse justify-content-end" id="navigation">
							<ul class="navbar-nav">
								<li class="nav-item"><a class="nav-link smooth-scroll" href="#about">个人简介</a></li>
								<li class="nav-item"><a class="nav-link smooth-scroll" href="#skill">掌握情况</a></li>
								<li class="nav-item"><a class="nav-link smooth-scroll" href="#portfolio"></a></li>
								
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</header>
		<div class="page-content">
			<div>
				<div class="profile-page">
					<div class="wrapper">
						<div class="page-header page-header-small" filter-color="green">
							<div class="page-header-image" data-parallax="true" style="background-image: url('images/cc-bg-1.jpg');"></div>
							<div class="container">
								<div class="content-center">
									
									<div class="h2 title">你好，我是郝泓达</div>
									<p class="category text-white">一名web前端工程师</p>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="section" id="about">
					<div class="container">
						<div class="card" data-aos="fade-up" data-aos-offset="10">
							<div class="row">
								<div class="col-lg-6 col-md-12">
								  <div class="card-body">
								    <div class="h4 mt-0 title text-center">个人简介</div>
								    <p>下面我将通过简单的页面自我介绍让您来了解我。我是来自泊头职业学院的一名前端工程师。我喜欢读书，因为它能丰富我的知识;我喜欢跑步，因为它可以磨砺我的意志，我是一个活泼开朗、热情、执着、有坚强意志的人。</p>
								    <p></p>
								  </div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="card-body">
										<div class="h4 mt-0 title">个人简介</div>
										<div class="row">
											<div class="col-sm-4 "><strong class="text-uppercase">姓名:</strong></div>
											<div class="col-sm-8">郝泓达</div>
										</div>
										<div class="row mt-3">
											<div class="col-sm-4"><strong class="text-uppercase">年龄:</strong></div>
											<div class="col-sm-8">20</div>
										</div>
										<div class="row mt-3">
											<div class="col-sm-4"><strong class="text-uppercase">邮箱:</strong></div>
											<div class="col-sm-8">1158837098@qq.com</div>
										</div>
										<div class="row mt-3">
											<div class="col-sm-4"><strong class="text-uppercase">爱好:</strong></div>
											<div class="col-sm-8">听音乐.读书.网页编程</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="section" id="skill">
					<div class="container">
						<div class="h4 text-center mb-4 title">掌握情况</div>
						<div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
							<div class="card-body">
								<div class="row">
									<div class="col-md-6">
										<div class="progress-container progress-primary"><span class="progress-badge">HTML</span>
											<div class="progress">
												<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10"
												 data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div><span
												 class="progress-value">80%</span>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="progress-container progress-primary"><span class="progress-badge">CSS</span>
											<div class="progress">
												<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10"
												 data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div><span
												 class="progress-value">75%</span>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="progress-container progress-primary"><span class="progress-badge">JavaScript</span>
											<div class="progress">
												<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10"
												 data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div><span
												 class="progress-value">60%</span>
											</div>
										</div>
									</div>
									
								
								
									<div class="col-md-6">
										<div class="progress-container progress-primary"><span class="progress-badge">Bootstrap</span>
											<div class="progress">
												<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10"
												 data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div><span
												 class="progress-value">75%</span>
											</div>
										</div>
									</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
			<div class="container">
					<div class="h4 text-center mb-4 title">代表作</div>
				
				<div class="tab-content gallery mt-5">
				  <div class="tab-pane active" id="web-development">
				    <div class="ml-auto mr-auto">
				      <div class="row">
				        <div class="col-md-6">
				          <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
				              <figure class="cc-effect"><img src="images/aimashi.png" alt="Image"/>
				                <figcaption>
				                  <div class="h4">爱马仕官网</div>
				                
				                </figcaption>
				              </figure></a></div>
				          <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
				              <figure class="cc-effect"><img src="images/duitang.png" alt="Image"/>
				                <figcaption>
				                  <div class="h4">堆糖网</div>
				                 
				                </figcaption>
				              </figure></a></div>
				        </div>
				        <div class="col-md-6">
				          <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
				              <figure class="cc-effect"><img src="images/tanyamingyuedao.png" alt="Image"/>
				                <figcaption>
				                  <div class="h4">天涯明月刀官网</div>
				              
				                </figcaption>
				              </figure></a></div>
				          <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
				              <figure class="cc-effect"><img src="images/taobao.png" alt="Image"/>
				                <figcaption>
				                  <div class="h4">淘宝官网</div>
				                  
				                </figcaption>
				              </figure></a></div>
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
			
				<div class="section" id="experience">
					<div class="container cc-experience">
						<div class="h4 text-center mb-4 title"></div>
						<div class="card">
							<div class="row">
								<div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
									<div class="card-body cc-experience-header">
										
										<div class="h5">学习动力</div>
									</div>
								</div>
								<div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
									<div class="card-body">
										<div class="h5">改善求学动力</div>
										<p> 反思你入读大学的初衷。把它罗列出来摆在一个可以经常看得到的地方，经常提醒自己。设立目标。搞明白哪些事情你必须要做，制定出短、中、长期目标。为自己开创一个支持学习的有力环境。如果你的动力是与他人合作，那么就要考虑加入一个研究小组。庆祝成果。当在规定期限内实现目标的时候，要记得奖励自己。</p>
									</div>
								</div>
							</div>
						</div>
						
						
					</div>
				</div>
				
				
				
			</div>
		</div>
		
		
		
		<div class="section" id="contact">
		  <div class="cc-contact-information" style="background-image: url('images/staticmap.png');">
		    <div class="container">
		      <div class="cc-contact">
		        <div class="row">
		          <div class="col-md-9">
		            <div class="card mb-0" data-aos="zoom-in">
		              <div class="h4 text-center title">联系我</div>
		              <div class="row">
		                  <div class="card-body">
		                    <form action="https://formspree.io/your@email.com" method="POST">
		                      <div class="p pb-3"><strong>写新留言</strong></div>
		                      <div class="row mb-3">
		                        
		                      </div>
		                      <div class="row mb-3">
		                        <div class="col">
		                          <div class="form-group">
		                            <textarea class="form-control" name="message" placeholder="有什么想对我说的话" required></textarea>
		                          </div>
		                        </div>
		                      </div>
		                      <div class="row">
		                        <div class="col">
		                          <button class="btn btn-primary" type="submit">提交</button>
		                        </div>
		                      </div>
		                    </form>
		                  </div>
		                </div>
		               
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div></div>
		    </div>
		   
		
		
		
		
		
		
		<footer class="footer">
			<div class="container text-center"><a class="cc-facebook btn btn-link" href="#"><i class="fa fa-facebook fa-2x "
					 aria-hidden="true"></i></a><a class="cc-twitter btn btn-link " href="#"><i class="fa fa-twitter fa-2x "
					 aria-hidden="true"></i></a><a class="cc-google-plus btn btn-link" href="#"><i class="fa fa-google-plus fa-2x"
					 aria-hidden="true"></i></a><a class="cc-instagram btn btn-link" href="#"><i class="fa fa-instagram fa-2x "
					 aria-hidden="true"></i></a></div>
			<div class="h4 title text-center"></div>
			
		</footer>
		<script src="js/core/jquery.3.2.1.min.js"></script>
		<script src="js/core/popper.min.js"></script>
		<script src="js/core/bootstrap.min.js"></script>
		<script src="js/now-ui-kit.js?v=1.1.0"></script>
		<script src="js/aos.js"></script>
		<script src="scripts/main.js"></script>
	</body>
</html>
